<template>
	<div class="todo-container">
		<div class="todo-wrap">
			<Header :addTodoList="addTodoList" />
			<Content
				:todoList="todoList"
				:singleChange="singleChange"
				:singleDelete="singleDelete"
			/>
			<Footer
				:allChecked="allChecked"
				:todoList="todoList"
				:clearComplate="clearComplate"
			/>
		</div>
	</div>
</template>

<script>
// import { nanoid } from "nanoid";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Content from "./components/Content";
export default {
	name: "App",
	components: {
		Header,
		Footer,
		Content,
	},
	data() {
		return {
			todoList: JSON.parse(localStorage.getItem("todoList")) || [],
		};
	},
	methods: {
		// 1.修改单个选中框
		singleChange(id) {
			this.todoList.forEach((item) => {
				if (item.id === id) {
					item.done = !item.done;
				}
			});
		},
		// 2.单个删除某个数据的方法
		singleDelete(index) {
			// 删除方法1:已知下标,并且只删除一个 可以使用splice直接进行删除
			this.todoList.splice(index, 1);
			// 删除方法2:已知iD,无论删除几个,都可以使用filter进行过滤删除
		},
		// 3.增加某个数据的方法
		addTodoList(newTodo) {
			this.todoList.unshift(newTodo);
		},
		// 4.全选的方法
		allChecked(newChecked) {
			this.todoList.forEach((item) => {
				item.done = newChecked;
			});
		},
		// 5.清除已完成
		// 当函数被调用的时候,会返回done值为false的所有对象
		clearComplate() {
			this.todoList = this.todoList.filter((item) => !item.done);
		},
	},

	// 无论todoList发生如何的改变,我们都要做某件事件,则我们可以监听这个数据的变化
	watch: {
		todoList: {
			immediate: true,
			deep: true,
			handler() {
				localStorage.setItem("todoList", JSON.stringify(this.todoList || []));
			},
		},
	},
};
</script>

<style>
/*base*/
body {
	background: #fff;
}

.btn {
	display: inline-block;
	padding: 4px 12px;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 1px 2px rgba(0, 0, 0, 0.05);
	border-radius: 4px;
}

.btn-danger {
	color: #fff;
	background-color: #da4f49;
	border: 1px solid #bd362f;
}

.btn-danger:hover {
	color: #fff;
	background-color: #bd362f;
}

.btn:focus {
	outline: none;
}

.todo-container {
	width: 600px;
	margin: 0 auto;
}
.todo-container .todo-wrap {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
}
</style>
